<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 引用文件 -->
    <link rel="stylesheet" href="node_modules/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="font_79zvzrucflv/iconfont.css">
    <!-- 首页index样式表 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header class="container" id="head">
        <section class="logo">
            <a href="./index.html">
                <img src="images/logo.png" alt="">
            </a>
        </section>
        <section class="findinput">
            <form>
                <!-- 搜索字体图标 -->
                <span class="iconfont icon-sousuo"></span>
                <input type="text" placeholder="搜索商品,发现更多优惠">
                <button>搜索</button>
            </form>
        </section>
        <section class="icfont">
            <!-- 三个字体图标 -->
            <a href="#">
                <span class="iconfont icon-99yuanbaoyou"></span>
                <p>全程包邮</p>
            </a>
            <a href="#">
                <span class="iconfont icon-qian"></span>
                <p>7天退换</p>
            </a>
            <a href="#">
                <span class="iconfont icon-gou"></span>
                <p>品质保证</p>
            </a>
            <a href="./login.html">登录</a>
        </section>
    </header>
    <!-- 页面选择 -->
    <div id="nav">
        <ul class="cantainer">
            <li class="active">首页</li>
            <li>9块9包邮</li>
            <li>超值大额卷</li>
            <li>降温急救穿搭</li>
        </ul>
    </div>
    <div>
        <!-- 链接列表以及轮播 -->
        <div class="container" id="foodslist">
            <!-- 渲染出来啊 -->
            <!-- 左边列表-->
            <div class="leftbox">
                <ul>
                    <li><span class="iconfont icon-qunzi"></span>女装/女鞋</li>
                    <li><span class="iconfont icon-dibangxie"></span>男装/男鞋</li>
                    <li><span class="iconfont icon-kouhong"></span>美妆/个护</li>
                    <li><span class="iconfont icon-xiexiangbao"></span>配饰/箱包</li>
                    <li><span class="iconfont icon-lingshi"></span>零食王国</li>
                    <li><span class="iconfont icon-muying"></span>母婴用品</li>
                    <li><span class="iconfont icon-shouji"></span>手机/数码</li>
                    <li><span class="iconfont icon-neiyi"></span>内衣袜子</li>
                    <li><span class="iconfont icon-jiaju-"></span>文娱/家居</li>
                </ul>
            </div>
            <!-- 右边图片-->
            <div class="rightbox">
                <div class="righttop">
                    <!-- 右边轮播-->
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="" alt=""></div>
                            <div class="swiper-slide"><img src="" alt=""></div>
                            <div class="swiper-slide"><img src="" alt=""></div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>

                    </div>
                    <!-- 8块9包邮图 -->
                    <div class="pic1">
                        <h3>9块9包邮</h3>
                        <p>保你不吃亏</p>
                        <img
                            src="http://img1.lukou.com/static/coupon/p/image_link/Q34r2F1uSePMh64rnVsuidyw1Q7gWi0W.gif">
                    </div>
                </div>
                <div class="rightbuttom">
                    <div>
                        <h3>降温急救穿搭</h3>
                        <p>速来抢购~</p>
                        <span>Go</span>
                        <img src="http://img1.lukou.com/static/coupon/p/image_link/wpyCxJo1GSvfq8vvG1n6GtFRAo37zZ2j.png"
                            alt="">
                    </div>
                    <div>
                        <h3>超值大额券</h3>
                        <p>优惠直击底价</p>
                        <span>Go</span>
                        <img src="http://img1.lukou.com/static/p/commodity/img/20181212-235507.png" alt="">
                    </div>
                    <div>
                        <p>扫码下载APP</p>
                        <p>发现更多惊喜</p>
                        <img src=""
                            alt="">
                    </div>

                </div>
            </div>
        </div>
        <!-- 商品列表-->
        <div class="container" id="cartlist">
            <!-- 标题-->
            <div class="title">
                <h3>小编精选</h3>
                <span>每天更新</span>
            </div>
            <!-- 详细列表-->
            <div class="lists">
                <!-- 渲染出商品列表-->
            </div>
            <div class="morecarts">
                更多商品
            </div>
            <div class="toTop">
                <span></span>
                <span>回到</span>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="buttomtop">
                <div class="buttomboxleft">
                    <img src="http://img1.lukou.com/static/img/activity/icon.png" alt="">
                    <div class="textline">
                        <h3>熊猫优选</h3>
                        <p>年轻人网购首选</p>
                        <p>购物领券更省钱</p>
                    </div>
                </div>
                <div class="buttomright">
                    <span>|<a href="#">下载APP</a></span>
                </div>
            </div>
            <div class="buttomtext">
                <img src="http://img1.lukou.com/static/img/activity/policeIcon.png" alt="">
                <span>浙公安网备案 33010602009949号|ICP备案号:浙ICP备17012864号-1 |</span>
                <img src="http://img1.lukou.com/static/img/activity/license.png" alt="">
                <span>证照信息</span>
            </div>
        </div>
    </footer>
    <!-- 引入文件 -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/swiper/swiper-bundle.min.js"></script>
    <!-- 首页index文件 -->
    <script src="js/index.js"></script>
</body>

</html>